<!DOCTYPE html>
<html>
<head>
    <title>Charge Distribution Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="650" height="200"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style and parameters
        const yCenter = 100;
        const radius = 30;
        const spacing = 140; // Represents distance 'a' in pixels
        const startX = 120;
        const lineWidth = 2;
        const signSize = 20; // Size of the '+' and '-' signs
        const labelFont = 'italic 28px "Times New Roman"';
        const ellipsisFont = '30px "Times New Roman"';

        // Set common styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = lineWidth;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Function to draw a plus sign
        function drawPlus(x, y, size) {
            ctx.beginPath();
            ctx.moveTo(x - size / 2, y);
            ctx.lineTo(x + size / 2, y);
            ctx.moveTo(x, y - size / 2);
            ctx.lineTo(x, y + size / 2);
            ctx.stroke();
        }

        // Function to draw a minus sign
        function drawMinus(x, y, size) {
            ctx.beginPath();
            ctx.moveTo(x - size / 2, y);
            ctx.lineTo(x + size / 2, y);
            ctx.stroke();
        }

        // --- Start Drawing ---

        // Ellipsis on the left
        ctx.font = ellipsisFont;
        ctx.fillText('...', startX - spacing * 0.7, yCenter);

        // --- Draw the four main ions ---

        // Ion 1 (Positive)
        let currentX = startX;
        ctx.beginPath();
        ctx.arc(currentX, yCenter, radius, 0, 2 * Math.PI);
        ctx.stroke();
        drawPlus(currentX, yCenter, signSize);
        ctx.font = labelFont;
        ctx.fillText('e', currentX, yCenter + radius + 25);

        // Distance label 'a' between ion 1 and 2
        ctx.fillText('a', currentX + spacing / 2, yCenter - radius - 20);

        // Ion 2 (Negative)
        currentX += spacing;
        ctx.beginPath();
        ctx.arc(currentX, yCenter, radius, 0, 2 * Math.PI);
        ctx.stroke();
        drawMinus(currentX, yCenter, signSize);
        ctx.font = labelFont;
        ctx.fillText('−e', currentX, yCenter + radius + 25); // Using a proper minus sign (U+2212)

        // Distance label 'a' between ion 2 and 3
        ctx.fillText('a', currentX + spacing / 2, yCenter - radius - 20);

        // Ion 3 (Positive)
        currentX += spacing;
        ctx.beginPath();
        ctx.arc(currentX, yCenter, radius, 0, 2 * Math.PI);
        ctx.stroke();
        drawPlus(currentX, yCenter, signSize);
        ctx.font = labelFont;
        ctx.fillText('e', currentX, yCenter + radius + 25);

        // Distance label 'a' between ion 3 and 4
        ctx.fillText('a', currentX + spacing / 2, yCenter - radius - 20);

        // Ion 4 (Negative)
        currentX += spacing;
        ctx.beginPath();
        ctx.arc(currentX, yCenter, radius, 0, 2 * Math.PI);
        ctx.stroke();
        drawMinus(currentX, yCenter, signSize);
        ctx.font = labelFont;
        ctx.fillText('−e', currentX, yCenter + radius + 25);

        // Ellipsis on the right
        ctx.font = ellipsisFont;
        ctx.fillText('...', currentX + spacing * 0.7, yCenter);

    </script>
</body>
</html>